import { useState } from 'react';
import header from './header.module.scss'

const Header = ({ onSearch }) => {
    const [searchText, setSearchText] = useState('');
    // const [showEmptyTip, setShowEmptyTip] = useState(false);

    const handleSearch = () => {
        if (!searchText.trim()) {
            // setShowEmptyTip(true);
            return;
        }
        // setShowEmptyTip(false);
        onSearch(searchText);
    };

    const handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            handleSearch();
        }
    };

    const handleInputChange = (e) => {
        setSearchText(e.target.value);
        // setShowEmptyTip(false);
    };

    return (
        <header className={header.header}>
            <div className={header.header__left}>
                <img src="/images/homeLogo.svg" alt="logo" className={header.header__logo} />
                <h1 className={header.header__title}>寻物小站</h1>
            </div>

            <div className={header.header__middle}>
                <img src="/images/search.png" alt="搜索小图标" className={header.header__middleIcon} />
                <input
                    type="text"
                    placeholder='请输出搜索内容'
                    className={header.header__middleInput}
                    value={searchText}
                    onChange={handleInputChange}
                    onKeyPress={handleKeyPress}
                />
                <button
                    className={header.header__middleButton}
                    onClick={handleSearch}
                >
                    搜索
                </button>
                {/* {showEmptyTip && (
                    <div className={header.header__emptyTip}>
                        请输入搜索内容
                    </div>
                )} */}
            </div>

            <div className={header.header__right}>
                <img src="/images/message.png" alt="消息小图标" className={header.header__rightIcon} />
                <img src="/images/setting.png" alt="设置小图标" className={header.header__rightIcon} />
                <img src="/images/user.png" alt="用户小图标" className={header.header__rightIcon} />
            </div>
        </header>
    )
}

export default Header;